<style type="text/css">
.multiHeadersGrid>.main>.head { height: 50px; }
.multiHeadersGrid>.ybar { margin-top: 48px; }
.multiHeadersGrid>.main>.head .th { height: 48px; }
.multiHeadersGrid>.main>.head .th[group] { height: 24px; }
<!--  -->
.money { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
	var hd1 = $('<div class="tth"></div>');
	var hdt = $('<div style="height: 25px"><div class="title">'
		+ '&nbsp;Account</div></div>').appendTo(hd1);
	var hdb = $('<div style="height: 25px"></div>').appendTo(hd1);
	$('.view').mac('grid', {
		sortLocally: true,
		headerHeight: 48,
		cols : [{
			field: 'subject', title : 'Subject', width: 140,
		},{
			field: 'summary', title : 'Summary', width: 150
		},{
			field: 'account', title : 'account', header: hd1,
			isGroup: true
		},{
			field: 'debit', title : 'Debit', width: 80,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				return '<div class="money">$'+r.debit + '</div>';
			}
		},{
			field: 'credit', title : 'Credit', width: 80,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				return '<div class="money">$'+r.credit + '</div>';
			}
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		pagerLength: 10
	});
});
</script>
<div class="viewPort demoPanel">
	<div class="view grid multiHeadersGrid"></div>
</div>